<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- <title>Markdown Editor</title>
    <script src="http://localhost:8081/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/marked/1.2.7/marked.min.js"></script>
    <link rel="stylesheet" type="text/css" />
    <meta name="referrer" content="never"> -->
  </head>
  <style>
html,body,#app{
    margin: 0;
    height: 100%;
    font-family: "Helvetica Neue",Arial,sans-serif;
    color: #333;
}

textarea,#app div{
    display: inline-block;
    width: 49%;
    height: 100%;
    vertical-align: top;
    box-sizing: border-box;
    padding: 0 20px;
}

textarea{
    border: none;
    border-right: 1px solid #ccc;
    resize: none;
    outline: none;
    background-color: #f6f6f6;
    font-size: 14px;
    font-family: "Monaco",courier,monospace;
    padding: 20px;
    background-image: url("1.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 50%;
}

code{
    color: #f66;
}


  </style>


  <body>
    <div id="app">
      <textarea :value="input" @input="update"></textarea>
      <div v-html="compiledMarkdown"></div>
    </div>

    <script>
    new Vue({
        el: "#app",
        data: {
          input: "# hello",
        },
        computed: {
          compiledMarkdown: function () {
            return marked(this.input);
          },
        },
        methods: {
          update: debounce(function (e) {
            console.log(this);
            this.input = e.target.value;
          }, 300),
        },
      });

      function debounce(fn,t){
        console.log(this)
        //核心：setTimeout 如果逻辑处理在间隔时间之内，那么就要清掉上个定时器，只保留一个定时器
        let timer = null;
        return function(e){
            if(timer){
                clearTimeout(timer)
            }
            timer = setTimeout(()=>{
                // 此处处理业务逻辑
                if(fn){
                    fn = fn.bind(this)
                    fn(e)
                }
            },t)
        }
      }
    </script>
  </body>
</html>
